<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>原生实现计数器</title>
</head>
<body>
<div id="change" class="change">
    <h1>{{ count }}</h1>
    <button data-on:click="--count">-</button>
    <button data-on:click="++count">+</button>
</div>

<script>
    let count = 0;

    // step1. 修改初始化元素显示的值
    let element = document.querySelector("#change > h1");
    element.innerText = count

    // step2. 获取要处理的元素
    let buttons = document.querySelectorAll("#change > button");

    for (let button of buttons) {
        // console.log(button);

        // step3. 处理元素的所有属性
        let attributeNames = button.getAttributeNames();

        for (let i = 0; i < attributeNames.length; i++) {
            // console.log(attributeNames[i]);

            // 处理数据绑定
            // ...

            // 处理事件
            if ((attributeNames[i].indexOf("data-on:") === 0) || (attributeNames[i].indexOf("@") === 0)) {
                let index = attributeNames[i].indexOf(":");
                if (index === -1){
                    index = attributeNames[i].indexOf("@");

                }

                // 获取事件的名称
                let event_name = attributeNames[i].substring(index + 1);
                console.log(event_name);

                // 获取事件的处理代码
                let event_code = button.getAttribute(attributeNames[i]);
                console.log(event_code);

                button.addEventListener(event_name, function () {
                    eval(event_code)
                    // 更新显示
                    element.innerText = count
                })
            }
        }
    }


</script>
</body>
</html>